<template>
  <view>
    <view class="main">
      <view class="main-tips">{{ text }}</view>
      <view class="main-img">
        <!-- <image :src="info.poster_url" mode="widthFix" /> -->
        <image
          @load="() => (text = '长按保存海报')"
          :src="canvasImage"
          mode="widthFix"
        />
      </view>
    </view>
  </view>
</template>

<script>
import api from '@/request/api.js'
import jWeixin from '@/node_modules/jweixin-module/lib/index.js'

export default {
  onLoad(option) {
    this.id = option.id
    this.itemId = option.itemId
    this.init()
  },
  data() {
    return {
      info: {}, // 藏品详情
      userInfo: {}, // 用户信息
      systemWidth: 0, // 屏幕高度比例
      id: '', // 藏品ID
      launch: false,
      load: false,
      itemId: '',
      canvasImage: '',
      text: '正在生成海报，请稍等片刻',
    }
  },
  mounted() {
    this.launch = true
    const url = location.href
    this.configSDK(url, {
      title: '卯时数字 - 进入我的',
      desc: '打造个人数字资产专属空间',
      link: 'https://h5.onedaen.com/pages/mine/mine',
      imgUrl: 'https://publish.onedaen.com/uploads/publicImg/shareLogo.png',
    })
    if (!this.ua) return
    document.getElementsByClassName('uni-page-head__title')[0].style.display =
      'none'
  },
  onShow() {
    if (!this.launch) return
    const url = location.href
    this.configSDK(url, {
      title: '卯时数字 - 进入我的',
      desc: '打造个人数字资产专属空间',
      link: 'https://h5.onedaen.com/pages/mine/mine',
      imgUrl: 'https://publish.onedaen.com/uploads/publicImg/shareLogo.png',
    })
  },
  methods: {
    async init() {
      const userInfo = uni.getStorageSync('userInfo')
      this.userInfo = userInfo
      const token = this.userInfo.token
      const uid = this.userInfo.uid
      const info = await api.myCollectionDetail({
        uid: uid,
        token: token,
        id: this.id, //用户唯一id
      })
      uni.showLoading({
        title: '正在生成海报，请稍等片刻',
      })
	  console.log()
      const infos = await api.mySharePoster({
        collect_id: info.data.collection_id,
        item_id: this.itemId,
		order_id:info.data.order_id
      })
      uni.hideLoading()

      this.canvasImage = infos.data.poster_url
      // 获取设备宽高
      uni.getSystemInfo({
        success: (system) => {
          this.systemWidth = system.windowWidth / 375
        },
      })
      this.info = info.data
      console.log('info', this.info)

      // this.createdPoster()
    },
    async configSDK(url, { title, desc, link, imgUrl }) {
      // const url = `https://h5.onedaen.com/pages/details/series_detail?id=${this.id}`

      const upUrl = encodeURIComponent(url)
      api.shareData({ url: upUrl }).then((res) => {
        jWeixin.config({
          debug: false, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
          appId: res.data.appId, // 必填，公众号的唯一标识
          timestamp: res.data.timestamp, // 必填，生成签名的时间戳
          nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
          signature: res.data.signature, // 必填，签名
          jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'], // 必填，需要使用的 JS 接口列表
        })

        jWeixin.ready(() => {
          // 分享给朋友
          jWeixin.updateAppMessageShareData({
            title, // 分享标题
            // desc: this.activity_detail.description, // 分享描述
            desc,
            link: res.data.url,
            imgUrl, // 分享图标
            success: () => {
              // 设置成功
              console.log('设置成功')
            },
          })
          // 分享到朋友圈
          jWeixin.updateTimelineShareData({
            title, // 分享标题
            link: res.data.url,
            imgUrl, // 分享图标
            success: () => {
              console.log('设置成功')
              // 设置成功
            },
          })
        })
      })
    },
    // 保存canvas图片
    saveCanvas() {
      uni.canvasToTempFilePath({
        // 这里修改保存的图片格式
        fileType: 'jpg',
        canvasId: 'testCanvas',
        quality: 1,
        success: (res) => {
          // 保存带哦本地
          uni.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            success: () => {
              uni.showToast({
                title: '保存海报成功',
                icon: 'none',
                duration: 3000,
              })
            },
            fail: () => {
              uni.showToast({
                title: '保存海报失败',
                icon: 'none',
                duration: 3000,
              })
            },
          })
        },
      })
    },
    // 长按保存海报
    saveSharePic() {
      uni.showModal({
        title: '提示',
        content: '确定要保存分享海报吗？',
        success: (res) => {
          if (res.confirm) {
            // canvas生成图片
            this.saveCanvas()
          }
        },
      })
    },
    onImgLoad() {
      this.text = '长按保存海报'
      uni.hideLoading()
    },
    // 生成海报
    createdPoster() {
      const rpx = this.systemWidth
      const context = uni.createCanvasContext('testCanvas', this)
      // 背景色
      context.rect(0, 0, 650 * rpx, 1500 * rpx)
      context.setFillStyle('#000')
      context.fill()
      //   this.showState = true

      // 商品主文件图
      uni.downloadFile({
        url: this.info.cover_url,
        success: (res) => {
          context.drawImage(res.tempFilePath, 0, 0, 325 * rpx, 313 * rpx)
          context.draw(true)
        },
      })
      // 二维码
      uni.downloadFile({
        url: 'https://publish.onedaen.com/uploads/material/picture/code.jpg',
        success: (res) => {
          context.drawImage(
            res.tempFilePath,
            20 * rpx,
            630 * rpx,
            75 * rpx,
            75 * rpx,
          )
          context.draw(true)
        },
      })
      // 商品名称
      context.setFontSize(18 * rpx)
      context.setFillStyle('#fff')
      context.fillText(this.info.name, 20 * rpx, 361 * rpx)

      // 拥有者和序号
      context.setFontSize(15 * rpx)
      context.setFillStyle('#ccc')
      context.fillText(`由${this.userInfo.nickName}拥有`, 20 * rpx, 390 * rpx)
      // 边框
      context.beginPath()
      // context.moveTo(242 * rpx, 377 * rpx)
      // context.arcTo(315 * rpx, 377 * rpx, 315 * rpx, 396 * rpx, 4 * rpx)
      // context.arcTo(315 * rpx, 396 * rpx, 240 * rpx, 396 * rpx, 4 * rpx)
      // context.arcTo(240 * rpx, 396 * rpx, 240 * rpx, 377 * rpx, 4 * rpx)
      // context.arcTo(240 * rpx, 377 * rpx, 315 * rpx, 242 * rpx, 4 * rpx)
      context.moveTo(234 * rpx, 375 * rpx)
      context.arcTo(300 * rpx, 375 * rpx, 300 * rpx, 395 * rpx, 4 * rpx)
      context.arcTo(300 * rpx, 395 * rpx, 230 * rpx, 395 * rpx, 4 * rpx)
      context.arcTo(230 * rpx, 395 * rpx, 230 * rpx, 375 * rpx, 4 * rpx)
      context.arcTo(230 * rpx, 375 * rpx, 254 * rpx, 375 * rpx, 4 * rpx)
      context.setStrokeStyle('#4effff')
      context.stroke()
      context.setFontSize(12 * rpx)
      context.setFillStyle('#4effff')
      context.fillText(`序号#${this.info.collection_id}`, 243 * rpx, 388 * rpx)
      // 发行信息
      context.setFontSize(12 * rpx)
      context.setFillStyle('#fff')
      context.fillText('发行商', 20 * rpx, 440 * rpx)
      context.fillText('发行数量', 211 * rpx, 440 * rpx)
      context.fillText('数字藏品ID', 20 * rpx, 478.5 * rpx)
      context.fillText('长按识别', 115 * rpx, 670 * rpx)
      context.fillText('关注“卯时数字平台”了解更多', 115 * rpx, 687 * rpx)

      context.setFillStyle('#ccc')
      context.fillText(this.info.brand_name, 75 * rpx, 440 * rpx)
      context.fillText(this.info.publish_count, 283 * rpx, 440 * rpx)
      context.fillText(this.info.nft_id.substr(0, 43), 20 * rpx, 516 * rpx)
      context.fillText(this.info.nft_id.substr(43), 20 * rpx, 536 * rpx)
      // line
      context.beginPath()
      context.moveTo(20 * rpx, 583 * rpx)
      context.lineTo(315 * rpx, 583 * rpx)
      context.setStrokeStyle('#999999')
      context.stroke()
      context.draw(true)
    },
  },
}
</script>

<style lang="scss">
.main {
  width: 750rpx;
  background-color: #181816;
  padding: 0 20rpx;
  box-sizing: border-box;
  min-height: 100vh;

  .main-tips {
    font-size: 30rpx;
    font-weight: normal;
    color: #fff;
    width: 750rpx;
    background-color: #181816;
    padding: 20rpx 0;
    text-align: center;
    line-height: 40rpx;
    position: fixed;
    top: 0;
    z-index: 1;
    left: 0;
  }
  ::v-deep .main-img {
    padding-top: 80rpx;
    height: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
    img {
      pointer-events: auto;
    }
  }
  // position: relative;
  // .canvas {
  //   width: 650rpx;
  //   height: 1500rpx;
  //   background-color: #000;
  //   margin: 0 auto;
  // }
  // .down {
  //   width: 40rpx;
  //   height: 40rpx;
  //   border-radius: 50%;
  //   overflow: hidden;
  //   position: fixed;
  //   bottom: 60rpx;
  //   background-color: #000;
  //   right: 60rpx;
  //   // box-sizing: border-box;
  //   padding: 20rpx;
  //   border: 1rpx solid #fff;
  //   image {
  //     width: 100%;
  //     height: 100%;
  //   }
  // }
}
</style>
